
<template>
    <div class="appHeader">
      <div class="appIcon">
        <img :src="headLogo">
      </div>
      <div class="user_info">
        <el-dropdown>
      <span class="el-dropdown-link">
       <i class="user_name">{{userInfo.userName}}</i> <i class="role_name"></i>
        <!--<img :src="headImage">-->
      </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span  @click="modifyPassworld">修改密码</span></el-dropdown-item>
            <el-dropdown-item divided><span  @click="quit">退出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
</template>

<script>
  import headLogo from '@/assets/logo.png';
//  import headImage from '@/assets/default-avatar.png';
  import {mapState} from 'vuex';
  export default {
    data () {
      return {
        headLogo
      };
    },
    methods: {
      // 退出登录
      quit () {
        alert('退出登录');
        // 退出登录
        this.$router.push({path: '/'});
      },
      // 修改密码
      modifyPassworld () {
        alert('修改密码，暂时无接口');
      }
    },
    components: {},
    created: function () {
    },
    computed: {
      ...mapState(['userInfo'])
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .appHeader{
    height: 70px;
    line-height: 70px;
    background: #5b9fc3;
    color: white;
    font-size: 18px;
  }
  .appIcon{
    float: left;
    margin-left: 25px;
  }
  .appIcon img{
    display: inline-block;
    vertical-align: middle
  }
  .user_info{
    width: 220px;
    height: 60px;
    text-align: center;
    float: right;
    /*background: #eef1f6;*/
  }
  .img_head{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    float: left;
    margin: 10px 10px 0 0;
  }
  .el-dropdown-menu__item span{
    display: block;
  }
  .user_name{
    font-size: 18px;
    font-style: normal;
    color: #fff;
  }
  .role_name{
    font-size: 12px;
    color: cornsilk;
  }

</style>
